<template>
  <div class="four">
    <div class="title">{{ type ? "历史模板" : "编辑模板" }}</div>
    <div class="form-content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="editor-plus-form"
        size="small"
      >
        <el-row>
          <el-col :span="24" v-if="!type">
            <el-form-item label="模板名称:" prop="info">
              <el-input
                v-model="ruleForm.info"
                maxlength="20"
                style="width: calc(100% - 100px)"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="memo" v-if="type">
              <el-input v-model="ruleForm.memo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row class="edit-row"> -->
        <el-row>
          <el-col :span="24" style="height: 100%">
            <el-form-item label="模板内容:" class="codeEditor">
              <!-- 用 v-if="ruleForm.state"控制了一下。。。。 -->
              <EditorPlus
                v-bind:template.sync="ruleForm.template"
                ref="editorPlus"
              ></EditorPlus>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row
      :gutter="10"
      class="mb8 grid-content btn_wrap_bottom"
      type="flex"
      justify="end"
    >
      <el-col :span="2">
        <el-button type="cyan " round @click="cancle">取消</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary " round @click="submitForm('ruleForm')"
          >保存</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CodeEditor from "@/components/codeEditor";
import EditorPlus from "@/components/EditorPlus";
import {
  templateInfo,
  editTemplate,
  AddTemplate,
  HistoryTemplateInfo,
  editHistoryTemplate,
} from "@/api/template/index";
import { validHttp } from "@/utils/validate";
export default {
  props: {},
  data() {
    return {
      radio1: "code",
      radio: 1,
      ruleForm: {
        memo: null,
        info: null,
        template: "",
      },
      siteId: this.$route.query.siteId || null,
      id: this.$route.query.id || null,
      parentId: this.$route.query.parentId || null,
      //history ||
      type: this.$route.query.type || null,
      operator: this.$store.getters.loginId,
      rules: {
        info: [
          { required: true, message: "请选择模板名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  components: { CodeEditor, EditorPlus },

  computed: {},
  created() {},
  mounted() {
    this.getTemplateDetail();
    // this.$nextTick(() => {
    //   this.$refs.editorPlus.radio1 = "view";
    // });
  },

  watch: {},

  methods: {
    async getTemplateDetail() {
      if (this.type != "history") {
        this.id &&
          (await templateInfo(this.id).then((res) => {
            this.ruleForm = res.data;
          }));
      } else {
        await HistoryTemplateInfo(this.id).then((res) => {
          this.ruleForm = res.data;
        });
      }
      this.$nextTick(() => {
        this.$refs.editorPlus.radio1 = "view";
      });
    },
    async submitForm(formName) {
      let form = this.ruleForm;
      if (validHttp(form.template)) {
        await this.$confirm(
          "模板内容中包含IP地址，可能涉及IP泄露问题，确认继续操作吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",

            type: "warning",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: false,
          }
        )
          .then(() => {
            this.handleBaocun(form, formName);
          })
          .catch(() => {
            return;
          });
      } else {
        this.handleBaocun(form, formName);
      }
    },
    handleBaocun(form, formName) {
      form.template = form.template
        ? form.template
            .replaceAll("<p>{", "{")
            .replaceAll("}</p>", "}")
            .replaceAll("}<br/></p>", "}<br>")
            .replaceAll("}<br></p>", "}<br>")
            .replaceAll("<p><br></p>", "<br>")
        : "";

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            if (this.type != "history") {
              // this.ruleForm.siteId = this.siteId;
              // this.ruleForm.id = this.id;
              // this.ruleForm.parentId = this.parentId;
              // this.ruleForm.operator = this.operator;
              editTemplate(this.ruleForm).then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("修改成功");
                  this.closeWindow();
                }
              });
            } else {
              editHistoryTemplate(this.ruleForm).then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("修改成功");
                  this.closeWindow();
                }
              });
            }
          } else {
            this.ruleForm.siteId = this.siteId;
            this.ruleForm.id = this.id;
            this.ruleForm.parentId = this.parentId;
            AddTemplate(this.ruleForm).then(() => {
              this.msgSuccess("新增成功");
              this.closeWindow();
            });
          }
        } else {
          return false;
        }
      });
    },
    reset() {
      this.ruleForm = {
        id: undefined,
        info: undefined,
        template: "",
        state: "1",
        deletedDate: null,
        siteId: this.siteId,
        parentId: this.parentId,
        operator: this.operator,
      };
    },
    cancle() {
      window.close();
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/el-form.scss";
.four {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
  height: 100%;

  padding-bottom: 86px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .form-content {
    padding: 10px;
    background: #fff;
    flex: 1;
    overflow: hidden;
    overflow: auto;
    .editor-plus-form {
      height: 100%;
      display: flex;
      flex-direction: column;
      .edit-row {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
// ::v-deep .codeEditor {
//   .el-form-item__content {
//     height: 500px;
//   }
// }
.codeEditor {
  height: 100%;
  ::v-deep .el-form-item__content {
    height: 100%;
  }
}
.title {
  height: 40px;
  line-height: 40px;
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
.btn_wrap_bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  margin-bottom: 0;
  height: 64px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e8e8e8;
}
</style>
